<template>
  <div>
    <mt-navbar class="page-part" v-model="selected" style="font-weight: 900">
      <mt-tab-item id="1" >设备权限</mt-tab-item>
      <mt-tab-item id="2">价格策略</mt-tab-item>
    </mt-navbar>

    <mt-tab-container class="page-tabbar-tab-container" v-model="selected" :swipeable="true">

      <!-- 设备权限 -->
      <mt-tab-container-item id="1" style="text-align: left">
        <mt-cell title="设备编号" :value="deviceCode"></mt-cell>
        <mt-cell title="科目" >
            <mt-button size="normal" type="primary" >{{subject == 30 ? '科三' : '科二' }}</mt-button>
        </mt-cell>
        <mt-cell title="激活状态">
          <mt-switch v-model="deviceActive">{{deviceActive == false ? '未激活' : '已激活'}}</mt-switch>
        </mt-cell>
        <mt-cell title="是否付款">
          <mt-switch v-model="buyVersion">{{ buyVersion == false ? '已付款' : '未付款' }}</mt-switch>
        </mt-cell>
        <mt-cell title="购买版本">
          <mt-switch v-model="paid">{{ paid == false ? '共享版' : '购买版' }}</mt-switch>
        </mt-cell>
        <mt-field label="试用天数" placeholder="试用天数" v-model="trailDays"></mt-field>

        <mt-cell title="计费模式">
          <mt-picker :slots="feeModes" valueKey="name" @change="onFeeModesValuesChange"></mt-picker>
        </mt-cell>

        <mt-cell title="免费权限">
          <mt-picker :slots="deviceAuths" valueKey="name" @change="onDeviceAuthValuesChange"></mt-picker>
        </mt-cell>

        <mt-button class="mt-button" type="primary" @click="onSaveDevicePermission">保存</mt-button>
      </mt-tab-container-item>

      <!--设备权限-->
      <mt-tab-container-item id="2" style="text-align: left">
        <!--***********************我是优美的分割线*****************************-->
        <mt-cell title="设备编号" :value="deviceCode" style="font-weight: 900"></mt-cell>
        <mt-cell title="科目" >
          <mt-button size="normal" type="primary" >{{subject == 30 ? '科三' : '科二' }}</mt-button>
        </mt-cell>
      <!--***********************我是优美的分割线*****************************-->

        <mt-field label="单价" placeholder="请输入单价" type="number" v-model="price" style=""></mt-field>
      <!--***********************我是优美的分割线*****************************-->

        <mt-cell title="分成策略" style="font-weight: 800;color: #f78423"></mt-cell>
        <!--修改分成策略信息-->
        <mt-cell title="类型" :value="tempDivideClass"></mt-cell>
        <mt-field label="用户编号"  placeholder="用户编号" type="number" v-model="tempUserCode" style="text-align: left"></mt-field>
        <mt-field label="比例"  placeholder="分成比例" type="number" v-model="tempDividePercentage" style="text-align: left"></mt-field>
        <mt-radio title="分成模式" v-model="divideType"  :options="divideTypeOptions" align="right"></mt-radio>

        <!--分成类型选择-->
        <mt-cell title="户号：15、比例：15、类型：比例" >
           <mt-button size="normal" type="primary" :disabled="di">教练</mt-button>
           <mt-button size="normal" type="danger" :disabled="di">删除</mt-button>
        </mt-cell>
        <mt-cell title="户号：15、比例：15、类型：比例" >
           <mt-button size="normal" type="primary">驾校</mt-button>
          <mt-button size="normal" type="danger" :disabled="di">删除</mt-button>
        </mt-cell>
        <mt-cell title="户号：15、比例：15、类型：比例" >
           <mt-button size="normal" type="primary">一代</mt-button>
          <mt-button size="normal" type="danger" :disabled="di">删除</mt-button>
        </mt-cell>
        <mt-cell title="户号：15、比例：15、类型：比例" >
           <mt-button size="normal" type="primary">二代</mt-button>
          <mt-button size="normal" type="danger" :disabled="di">删除</mt-button>
        </mt-cell>
        <mt-cell title="" >
           <mt-button size="normal" type="primary">三代</mt-button>
          <mt-button size="normal" type="danger" :disabled="di">删除</mt-button>
        </mt-cell>
        <!--***********************分成类型选择结束*****************************-->

        <mt-cell title="套餐" style="font-weight: 800;color: #f78423"></mt-cell>
        <div>
          <mt-button >15元半小时</mt-button>
          <mt-button type="primary">30元一小时</mt-button>
          <mt-button >15元半小时</mt-button>
          <mt-button type="primary">30元一小时</mt-button>
          <mt-button >15元半小时</mt-button>
          <mt-button type="primary">30元一小时</mt-button>
          <mt-button >15元半小时</mt-button>
          <mt-button type="primary">30元一小时</mt-button>
        </div>

         <mt-button class="mt-button" type="primary" @click="onSaveDevicePriceStrategy">保存</mt-button>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
  import {MessageBox} from 'mint-ui';

  export default {
    name: "DeviceInfo",
    data() {
      return {
        selected: "1", //当前选择Tab页面
        deviceCode: "0", //设备号
        subject: '30',
        deviceActive: false, //默认激活状态
        buyVersion: false, //是否已付款
        paid: false, //购买版本
        deviceAuths: [
          {
            flex: 1,
            values: [
              {name: "无功能", value: "0"},
              {name: "手动播报", value: "1"},
              {name: "自动播报", value: "2"},
              {name: "自动评判", value: "6"}
            ],
            textAlign: "right"
          }
        ], //播报功能
        trailDays: 5, //免费使用天数
        deviceAuth: "", //
        feeModes: [
          {
            flex: 1,
            values: [
              {name: "计时", value: "1"},
              {name: "套餐", value: "2"},
              {name: "套餐+计时", value: "3"},
              {name: "包干", value: "4"}
            ],
            textAlign: "right"
          }
        ],
        feeMode: "",
        di: true,
        price: '',


        tempDivideClass: '教练',   //临时分成类型
        tempUserCode: '11111',
        tempDividePercentage: '11.00',
        divideType: '1',
        divideTypeOptions: [{label:'比例',value:'1'}, {label:'固定',value:'2'}, {label:'混合',value:'3'}],

      };
    },
    created: function () {

      this.init();
    },
    methods: {
      init: function () {
        //赋值设备编号

        let device = this.$route.params.deviceCode;
        if (device) {
          this.deviceCode = device;
          sessionStorage.setItem("deviceCode", device);
        } else {

          this.deviceCode = sessionStorage.getItem("deviceCode");
          if (!this.deviceCode) {

            MessageBox('提示', '没有找到设备编号！');
            this.$router.push({name: 'DeviceSearch'})
          }
        }

        if (!this.deviceCode) {
          this.deviceCode = this.$route.params.deviceCode;
        }
      },
      onDeviceAuthValuesChange: function (picker, values) {

        if (values[0] > values[1]) {
          picker.setSlotValue(1, values[0]);
        }

        this.deviceAuth = values[0].value;
      },
      onFeeModesValuesChange: function (picker, values) {

        if (values[0] > values[1]) {
          picker.setSlotValue(1, values[0]);
        }
        this.feeMode = values[0].value;
      },onSaveDevicePermission: function () {

        //保存设备权限数据
        let param = {
          deviceCode: this.deviceCode,        //  设备编号
          deviceActive: this.deviceActive,    //  激活状态
          buyVersion: this.buyVersion,        //  是否付款
          paid: this.paid,                    //  购买版本
          trailDays: this.trailDays,          //  试用天数
          deviceAuth: this.deviceAuth,        //  免费权限
          feeMode: this.feeMode,              //  计费模式
        }

        console.log(param);
      },onSaveDevicePriceStrategy: function () {

        // 保存价格策略信息
        let param = {
          deviceCode: this.deviceCode,        //  设备编号
          deviceActive: this.deviceActive,    //  激活状态
          buyVersion: this.buyVersion,        //  是否付款
          paid: this.paid,                    //  购买版本
          trailDays: this.trailDays,          //  试用天数
          deviceAuth: this.deviceAuth,        //  免费权限
          feeMode: this.feeMode,              //  计费模式
        }

        console.log(param);
      }
    }
  };
</script>


<style scoped>
  .mt-button {
    width: 100%;
    margin-top: 2rem;
  }
</style>

